<template>
	<div class="sidebar-logo-container hidden-xs-only" :class="{'collapse-logo':collapse}"
		:style="{ background : background , borderRight  : ' 1px solid '+ borderRight }">
		<transition name="sidebarLogoFade">
			<a v-if="collapse" key="collapse" class="sidebar-logo-link" href="/">
				<img v-if="logo" :src="logo" class="sidebar-logo">
				<h1 v-else class="sidebar-title">{{ title }} </h1>
			</a>
			<a v-else key="expand" class="sidebar-logo-link" href="/">
				<img v-if="logo" :src="logo" class="sidebar-logo">
				<h1 class="sidebar-title">{{ title }} </h1>
			</a>
		</transition>
	</div>
</template>

<script>
	export default {
		name: 'FireSidebarLogo',
		props: {
			collapse: {
				type: Boolean,
				required: true
			},
			borderRight: {
				type: String,
				default: '店滴AI'
			},
			background: {
				type: String,
				default: '店滴AI'
			},
			title: {
				type: String,
				default: '店滴AI'
			},
			logo: {
				type: String,
				default: require("../../assets/images/logo.jpeg")
			}
		},
		data() {
			return {
				// title: 'Vue Element Admin',
				// logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
			}
		}
	}
</script>

<style scoped>
	.sidebarLogoFade-enter-active {
		transition: opacity 1.5s;
	}

	.sidebarLogoFade-enter,
	.sidebarLogoFade-leave-to {
		opacity: 0;
	}

	.sidebar-logo-container {
		position: relative;
		width: 100%;
		height: 61px;
		line-height: 61px;
		background: #2b2f3a;
		text-align: center;
		overflow: hidden;
	}

	.sidebar-logo-link {
		height: 100%;
		width: 100%;
	}
	
	.sidebar-logo {
		width: 32px;
		height: 32px;
		vertical-align: middle;
		margin-right: 12px;
	}

	.sidebar-title {
		display: inline-block;
		margin: 0;
		color: #fff;
		font-weight: 600;
		line-height: 61px;
		font-size: 14px;
		font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
		vertical-align: middle;
	}

	.collapse-logo > .sidebar-logo {
		margin-right: 0px;
	}
</style>
